<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>
        
        <div class="box">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <h3 style="line-height:32px;">
                            <i class="el-icon-s-tools"></i> &nbsp; 管理信息
                        </h3>
                    </div>
                </el-col>
                <el-col :span="16" style="text-align: right;">
                    <div class="grid-content bg-purple">
                        <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible = true">新增用户</el-button>
                        <el-button size="small" type="primary" icon="el-icon-remove-outline">删除用户</el-button>
                    </div>
                </el-col>
            </el-row>
            <div class="divider"></div>
            
            <el-row :gutter="15" class="whererow">
                <el-col :span="4" style="line-height:32px;">当前共32个用户。</el-col>
                <el-col :span="6">
                    <el-input v-model="search" type="text" size="small" placeholder="请输入用户名称">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </el-col>
            </el-row>

        </div>

        <div class="noticerow box">
            <i class="el-icon-edit"></i> &nbsp; 已选择了0项
        </div>

        <el-table border
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column align="center" type="selection" width="55"> </el-table-column>
            <el-table-column align="center" label="编号" width="60">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column align="center" label="账号">
                <template slot-scope="scope">{{ scope.row.loginName }}</template>
            </el-table-column>
            <el-table-column align="center" label="姓名">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column align="center" label="邮箱地址">
                <template slot-scope="scope">{{ scope.row.email }}</template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" width="200">
                <template slot-scope="scope">{{ scope.row.createAt }}</template>
            </el-table-column>
            <el-table-column align="center" label="最近登录" width="200">
                <template slot-scope="scope">{{ scope.row.lastLoginTime }}</template>
            </el-table-column>
            <el-table-column align="center" label="启用" width="130">
                <template slot-scope="scope">
                    <p>操作：<el-switch v-model="scope.row.enable" active-color="#1aa" inactive-color="#aaa"></el-switch></p>
                </template>
            </el-table-column>
            
            <el-table-column align="center" label="操作" width="170">
                <template slot-scope="scope">
                    <el-button title="分配角色" type="primary" size="mini" icon="el-icon-user" circle @click="roleDialogVisible = true"></el-button>
                    <el-button title="编辑用户" type="warning" size="mini" icon="el-icon-edit" circle @click="editDialogVisible = true"></el-button>
                    <el-button title="删除用户" type="danger" size="mini" icon="el-icon-delete" circle @click="$router.push('#'+scope.row.id)"></el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <div class="pagination">
            <el-cascader size="small" v-model="value" :options="options"></el-cascader>
            <el-pagination background 
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </div>

        <!-- 分配角色的弹出框 -->
        <el-dialog title="分配角色" :visible.sync="roleDialogVisible" 
            width='30%' :modal-append-to-body="false">
            <el-select v-model="selectRoles" multiple  placeholder="请选择角色">
                <el-option label="系统管理员" value="1"></el-option>
                <el-option label="运营管理员" value="2"></el-option>
                <el-option label="商品管理员" value="3"></el-option>
                <el-option label="订单管理员" value="4"></el-option>
            </el-select>
            <div slot="footer">
                <el-button @click="roleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="roleDialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 新增用户的弹窗 -->
        <el-dialog title="新增用户" :visible.sync="addDialogVisible" :modal-append-to-body="false">
            <el-row>
                <el-col :span="16">
                    <el-form ref="form" :model="cuser" label-width="80px" size="small">
                        <el-form-item label="账号">
                            <el-input v-model="cuser.loginName"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="cuser.pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="cuser.name"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="cuser.email"></el-input>
                        </el-form-item>
                        <el-form-item label="个人介绍">
                            <el-input type="textarea" v-model="cuser.desc"></el-input>
                        </el-form-item>

                        <el-form-item size="large">
                            <el-button type="primary">保存</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="8">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="cuser.imageUrl" :src="cuser.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
            </el-row>
        </el-dialog>

        <!-- 修改用户的弹窗 -->
        <el-dialog title="修改用户" :visible.sync="editDialogVisible" :modal-append-to-body="false">
            <el-row>
                <el-col :span="16">
                    <el-form ref="form" :model="cuser" label-width="80px" size="small">
                        <el-form-item label="账号">
                            <el-input v-model="cuser.loginName"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="cuser.pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="cuser.name"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="cuser.email"></el-input>
                        </el-form-item>
                        <el-form-item label="个人介绍">
                            <el-input type="textarea" v-model="cuser.desc"></el-input>
                        </el-form-item>

                        <el-form-item size="large">
                            <el-button type="primary">保存</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="8">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="cuser.imageUrl" :src="cuser.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
            </el-row>
            
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            cuser: {},
            addDialogVisible: false,
            editDialogVisible: false,
            roleDialogVisible: false,
            search: '',
            selectRoles: '',

            currentPage: 3,
            input: '',
            value: '',
            options: [{
                value: 'enable',
                label: '启用'
            },{
                value: 'disable',
                label: '禁用'
            }],
            tableData: [{
                id: '01',
                loginName: 'xiaohu',
                name: '王小虎',
                email: true,
                createAt: '2011-11-11 11:11:11',
                lastLoginTime: '2011-11-11 11:11:11', 
                enable: true
            },{
                id: '01',
                loginName: 'xiaohu',
                name: '王小虎',
                email: true,
                createAt: '2011-11-11 11:11:11',
                lastLoginTime: '2011-11-11 11:11:11', 
                enable: true
            },{
                id: '01',
                loginName: 'xiaohu',
                name: '王小虎',
                email: true,
                createAt: '2011-11-11 11:11:11',
                lastLoginTime: '2011-11-11 11:11:11', 
                enable: true
            }]
        }
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleAvatarSuccess(res, file) {
            this.cuser.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
}
</script>

<style scoped>
.avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 20px;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
}
.avatar {
    width: 130px;
    height: 130px;
    display: block;
}
</style>